<template>
	<el-dialog class="abow-dialog" :visible.sync="visible"
		:title="!userId ? '新增' : '修改'" :close-on-click-modal="false"
		:close-on-press-escape="false" width="650px" @close="closeFn">
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="160px" size="medium" :inline="false"
			labelSuffix="：">
			<el-form-item prop="playlet_id" label="选择短剧">
				<el-select clearable v-model="dataForm.playlet_id" placeholder="请选择" @focus="playletListFn">
					<el-option v-for="(item,index) in playletList" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="amount" label="比例">
				<el-input clearable v-model="dataForm.amount"
					@input="(v)=>(dataForm.amount=handleNumber2(v,2,3,false))" placeholder="请输入比例">
					<template slot="append">%</template>
				</el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import {handleNumber2} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {
			return {
				handleNumber2,
				userId:null,
				playletList:[],
				visible: false,
				dataForm: {
					playlet_id:'',//短剧ID
					amount:''
				}
			}
		},
		created() {},
		computed: {
			dataRule() {
				return {
					playlet_id: [{
							required: true,
							message: '短剧不能为空!',
							trigger: ['blur','change']
						}
					],
					amount: [{
							required: true,
							message: '比例不能为空!',
							trigger: ['blur','change']
						}
					],
				}
			}
		},
		methods: {
			closeFn(){
				this.$refs.dataForm.resetFields();
			},
			//获取短剧列表
			async playletListFn() {
				const pRes = await this.$axios.get(`/api/common/playlet`);
				console.log(pRes);
				if(Array.isArray(pRes)) {
					if (pRes.length) {
						this.playletList = pRes;
						return;
					}
				}
				this.playletList = [];
			},
			init() {
				this.visible = true;
				this.playletListFn();
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
				})
			},
			update(row) {
				this.visible = true
				this.playletListFn();
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
					this.dataForm = Object.assign({}, row)
				})
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					console.log(this.dataForm);
					this.$axios.post(this.userId?`/api/playlet/playletbind/update/${this.userId}`:'/api/playlet/playletbind/create', this.dataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false;
								this.$emit('refreshDataList');
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 540px;
	}
</style>